<template>
	<view class="container">
		<view class="search_view">
			<u-search placeholder="输入名称/位置搜索" v-model="keyword" :clearabled="true" action-text="取消"
				@custom="cancelAction" @search="searchAction"></u-search>
		</view>
		<view class="list_view">
			<view class="item_view" v-for="(item,index) in dataList" :key="index" @click="detailAction(item)">
				<view class="left_view">
					<view class="icon_view">
						<image v-if="item.resultType=='DOOR'" :src="doorIcon" mode=""
							style="border-radius: 10rpx;width: 100%;height: 100%;">
						</image>
						<image v-if="item.resultType=='LOCK'" :src="lockIcon" mode=""
							style="border-radius: 10rpx;width: 100%;height: 100%;">
						</image>
					</view>
					<view class="content_view">
						<view class="Text33" style="margin-bottom: 10rpx;">
							{{ item.name }}
						</view>
						<view class="Text66">
							{{ item.desc }}
						</view>
					</view>
				</view>
				<view class="right_view">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-empty text="暂无数据" mode="list" v-if="dataList.length==0" :margin-top="300"></u-empty>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				doorIcon: '/static/images/smartLock/doorIcon.png',
				lockIcon: '/static/images/smartLock/lockIcon.png',
				keyword: '',
				dataList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				emptyPage: false,
			}
		},
		created() {},
		methods: {
			cancelAction() {
				uni.navigateBack()
			},
			detailAction(item) {
				this.$Router.push({
					name: 'deviceDetail',
					params: {
						deviceId: item.id,
						deviceType: item.resultType
					}
				})
			},
			onPullDownRefresh() {
				this.pageNum = 1
				this.searchAction()
			},
			onReachBottom() {
				if (this.total <= this.pageNum * this.pageSize) {
					return
				}
				this.pageNum += 1
				this.searchAction()
			},
			searchAction() {
				console.log('开始搜索！');
				if (!this.keyword) {
					return this.$show.toastMessage('请输入搜索信息');
				}
				var that = this
				this.$apis.getSearch({
					searchValue: this.keyword,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(result => {
					uni.stopPullDownRefresh();
					if (result.res.data.code == '200') {
						if (that.pageNum == 1) {
							that.dataList = [] //如果是第一页需手动制空列表
							if (result.res.data.rows.length == 0) that.emptyPage = true
						}
						that.total = result.res.data.total
						that.dataList = that.dataList.concat(result.res.data.rows)
					} else {
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F8F8F8;
	}

	.search_view {
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.list_view {
		padding: 20rpx;
		padding-top: 0;

		.item_view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin: 20rpx 0;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			.left_view {
				display: flex;
				flex-direction: row;
				align-items: center;

				.icon_view {
					width: 100rpx;
					height: 100rpx;
				}

				.content_view {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>